<template>
  <div class="class-create-root">
    <!-- @closed 窗口关闭时结束时的回调   -->
    <el-dialog v-model="dialogStatus" title="创建班级" width="600"
               @closed="closeDialog"
               style="text-align: center;font-weight:bold;"
    >
      <el-form :model="form">
        <el-form-item label="班级名称" :label-width="formLabelWidth">
          <el-input v-model="form.class_name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="班级类型" :label-width="formLabelWidth">
          <el-select v-model="form.class_type" placeholder="请选择班级类型">
            <el-option v-for = "(itemValue, itemKey) in CLASS_TYPE" :key="itemKey" :label="itemValue" :value="itemKey" />
          </el-select>
        </el-form-item>
        <el-form-item label="课程名称" :label-width="formLabelWidth">
          <el-select v-model="form.course_id" placeholder="请选择班级课程">
            <el-option v-for = "(itemValue, itemKey) in courses" :key="itemKey" :label="itemValue.course_name" :value="itemValue.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="班主任" :label-width="formLabelWidth">
          <el-select v-model="form.teacher_id" placeholder="请选择班主任老师">
            <el-option v-for = "(itemValue, itemKey) in teachers" :key="itemKey" :label="itemValue.name" :value="itemValue.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="讲师" :label-width="formLabelWidth">
          <el-select v-model="form.lecturer_id" placeholder="请选择主讲老师">
            <el-option v-for = "(itemValue, itemKey) in lecturers" :key="itemKey" :label="itemValue.name" :value="itemValue.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" :label-width="formLabelWidth">
          <el-date-picker
              v-model="form.start_date"
              type="date"
              placeholder="请选择开班时间"
              :size="size"
              format="YYYY/MM/DD"
              value-format="YYYYMMDD"
          />
        </el-form-item>
        <el-form-item label="毕业时间" :label-width="formLabelWidth">
          <el-date-picker
              v-model="form.end_date"
              type="date"
              placeholder="请选择班级毕业时间"
              :size="size"
              format="YYYY/MM/DD"
              value-format="YYYYMMDD"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="classCreate">
            创建
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref, watch} from 'vue'
import {CLASS_TYPE} from "@/dict/dict-class-info";
import {getCoursesAPI} from "@/network/course/course";
import {getEmployeesByPortAPI} from "@/network/employee/employee";
import {createClassAPI} from "@/network/class/class";
import {ElMessage} from "element-plus";
import eventBus from "@/plugins/event-bus";

// 下边是从父组件与子组件的数据交互，来控制弹窗的展开和关闭的。
const props = defineProps({
  dialogFormVisible: Boolean
})
const dialogStatus = ref(props.dialogFormVisible)
const emit = defineEmits(['closeFormVisible'])
const closeDialog = ()=>{
  emit('closeFormVisible', false)
}
// 监听父组件传递的 `dialogFormVisible` 变化
watch(() => props.dialogFormVisible, (newValue) => {
  // 如果需要在变化时执行一些逻辑，可以在这里添加，这里只把关闭的值传进去，相当于状态值转一圈来控制对话框的打开和关闭
  dialogStatus.value = newValue;
});
// 这个是表格里边的宽度设置，element-plus自带的
const formLabelWidth = '70px'

// 日期控件大小设置
const size = "default";

// 下边是创建班级的具体逻辑代码
// 这里是声明表格中具体的数据
const form = reactive({
  class_name: '',
  class_type: '',
  course_id: '',   // 课程名称id
  teacher_id: '',  // 班主任姓名id
  lecturer_id: '', // 讲师姓名id
  start_date: '',
  end_date: '',
})

const courses = ref([])
const teachers = ref([])
const lecturers = ref([])


onMounted(()=>{
  getCoursesAPI({
    skip:1,
    limit:100
  }).then((res)=>{
    courses.value = res.data.data
  })

  getEmployeesByPortAPI(1).then((res)=>{
    teachers.value = res.data.data
  })

  getEmployeesByPortAPI(2).then((res)=>{
    lecturers.value = res.data.data
  })
  // console.log(teachers.value)

})

function classCreate(){
  // form.start_date = formatDateToYYYYMMDD(form.start_date)
  // form.end_date = formatDateToYYYYMMDD(form.end_date)
  createClassAPI(form).then((res)=>{
    if(res.data.code==0){
      ElMessage.success("创建班级成功")
      closeDialog();
    //  添加时间总线的事件触发,然后在DefaultClassManager.vue中进行监听，重新拉一下班级列表
      eventBus.emit("update-classes-event",res.data.code)
    }else{
      // console.log(res)
      ElMessage.error("创建班级失败")
    }

})
}

</script>

<style scoped lang="less">

</style>